<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>



<button class="btn btn-primary btn-lg"  data-target="#myModal" id="modal">
    Launch demo modal
</button>
<div class="modal fade"  id="myModal">
<div class="modal-dialog modal-md">
    <div class="modal-content">
    <div class="modal-header">
        <button  class="close" data-dismiss="modal" ><span >&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
    </div>
    <div class="modal-body">
        <p>One fine body&hellip;</p>
    </div>
    <div class="modal-footer">
        <button  class="btn btn-default" data-dismiss="modal">Close</button>
        <button  class="btn btn-primary">Save changes</button>
    </div>
    </div>
</div>
</div>
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(function(){
    // $("#modal").click(function(){
    //     $("#myModal").modal('show');
    // })

    $("#modal").click(function(){
        $("#myModal").modal({
            show:true,
            keyboard:true,
        });
    })

    // $("#myModal").on('hidden.bs.modal',function(e){
    //     alert(1);
    // })
    $("#myModal").on('show.bs.modal',function(e){
        alert(222);
    })
})


</script>

</body>
</html>